<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>ag-grid中文教程 - itxst.com</title>
    <meta name="keywords" content="ag-grid中文文档 ag-grid教程 ag-grid使用方法" />
    <meta name="description" content="ag-grid是一款功能和性能强大外观漂亮的表格插件，ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能,ag-grid中文文档由it小书童创作。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/ag-grid/tutorial.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/ag-grid/tutorial.html">ag-grid中文教程</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="ag-grid">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>ag-grid中文教程</h1>
               
               <p>ag-grid是一款功能和性能强大外观漂亮的表格插件，ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。<span style="color: rgb(255, 0, 0);">关于收费的问题</span>，绝大部分应用用<span style="color: rgb(255, 0, 0);">免费</span>的社区版就够了，ag-grid-community社区版一样功能强大，本教程所有功能都是基于ag-grid-community社区版本实现。</p><h2>ag-grid 官网</h2><p>本教程只列举了ag-grid日常开发用的功能，请详细的文档请访问下面的官网地址<br/><a href="https://ag-grid.com/javascript-data-grid/" target="_blank">https://ag-grid.com/javascript-data-grid/</a></p><h2>依赖环境</h2><p>ag-grid支持现代浏览器，甚至包括Internet Explorer 8</p><h2>网页引用文件</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">&lt;script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"&gt;&lt;/script&gt;
&lt;link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet"/&gt;</code></pre><h2>Html代码</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">&lt;div id="myGrid" style="width: 100%;height: 500px;"  class="ag-theme-balham"&gt;&lt;/div&gt;</code></pre><h2>初始化ag-grid</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">//定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'left',width:120 },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age' },
    { headerName: '籍贯', field: 'jg' },
    { headerName: '省份', field: 'sf' },
    { headerName: '地址', field: 'dz' },
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
    { name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
    { name: '王五', sex: '女', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }
];

//顶部合计行
var topRows=[
   { name: '顶部合计行', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' } 
];

//底部合计行
var botRows=[
  { name: '置顶行1', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
  { name: '置顶行2', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
];

//将列和数据赋给gridOptions 
var gridOptions = {
    rowHeight :30, //设置行高为30px,默认情况下是25px   
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
         //表格创建完成后执行的事件
        gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
    },
    defaultColDef: {
        editable: true,//单元表格是否可编辑
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true, //开启排序
        resizable: true,//是否可以调整列大小，就是拖动改变列大小
        filter: true  //开启刷选
    },
    pagination: true,  //开启分页（前端分页）
    paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
    pinnedTopRowData:topRows, //顶部合计行
    pinnedBottomRowData:botRows ,//顶部合计行
    //**************设置置顶行样式**********
    getRowStyle: function (params) { 
            if (params.node.rowPinned) {   
                     return {'font-weight': 'bold','color':'red'};
        }
     },       
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});</code></pre><p><a class="btntry" href="http://debug.itxst.com/js/ag-grid" target="_blank" title="在线试一试" textvalue="在线试一试">在线试一试</a></p><h2>设置选择列</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">//定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'left', filter: 'agTextColumnFilter',checkboxSelection:true,headerCheckboxSelection:true 
 },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age' , filter: 'agNumberColumnFilter'},
    { headerName: '生日', field: 'sr', filter: 'agNumberColumnFilter' }
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '张三', sex: '男', age: 100, 'sr':1918 },
    { name: '李四', sex: '女', age: 5, 'sr':2000 } 
];

var gridOptions = { 
    columnDefs: columnDefs,
    rowSelection: 'multiple', //设置多行选中 single 表示只能选中一行
    rowMultiSelectWithClick:true, 
    rowDeselection:true,
    rowData: data 
};
    var ag=null;
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
     ag=new agGrid.Grid(eGridDiv, gridOptions);
});
   
  //获取选中行
 function getSelect()
 {
  alert(JSON.stringify(gridOptions.api.getSelectedRows())); 
   
 }</code></pre><p><a href="/ag-grid/z2mbaiju.html" target="_blank" title="点击查看详情" textvalue="点击查看详情">点击查看详情</a></p><h2>ag-grid新增删除修改</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">//修改数据 
var rowNode = gridOptions.api.getRowNode(2);
var newRow= {   
     id: '66',  
     name: 'it小书童', 
     url: 'itxst.com', 
     catalog: Math.floor(Math.random()*100000)
  };
 rowNode.setData(newRow);
     
 //删除选中行
 var selRows = gridOptions.api.getSelectedRows();  
 gridOptions.api.updateRowData({remove: selRows});
 
 //第三种方法新增到第二行
 var newRows= [{     
    id: '15',        
    name: 'it小书童',        
    url: 'itxst.com',        
    catalog: Math.floor(Math.random()*100000)
  }];  
 gridOptions.api.updateRowData({add: newRows,addIndex:1});</code></pre><p><a href="/ag-grid/jjqur2qr.html" target="_blank" title="点击查看详情" textvalue="点击查看详情">点击查看详情</a></p><h2>ag-grid全选反选</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">//全选包含隐藏的行
gridOptions.api.selectAll();
//反选
gridOptions.api.deselectAll();
//根据筛选条件选中行
gridOptions.api.selectAllFiltered();
//根据筛选条件选反行
gridOptions.api.deselectAllFiltered();
//获取选中数据var rows=gridOptions.api.getSelectedRows();
alert(JSON.stringify(rows));</code></pre><p><a href="/ag-grid/qnzf3aff.html" target="_blank" title="点击查看详情" textvalue="点击查看详情">点击查看详情</a></p>
 
               
                </div>
                <div class="content-r">   <a href="/ag-grid/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/6/a/6a64ca8502629c460bcef5add9c38d35.png" alt="ag-grid中文教程" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
            <a data-level="1" class="leve-1   doc-1    doc-2 " href="/ag-grid/tutorial.html" title="ag-grid中文教程">ag-grid中文教程</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">ag-grid vue</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/nqrfnuzz.html" title="ag-grid vue 快速入门教程">ag-grid vue入门教程</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/ybuyjr7v.html" title="ag-grid vue umd浏览器直接引入js版用法">umd浏览器版用法</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/n6nien2i.html" title="ag-grid vue 全选反选并获取选中数据">vue全选反选</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/nin3iain.html" title="ag-grid vue 插入数据新增行">vue插入数据新增行</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">常用功能</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/7r7zbbfu.html" title="ag-grid多表头合并列">ag-grid多表头</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/aaeabuzi.html" title="ag-grid固定列">ag-grid固定列</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/ynm2meqa.html" title="通过拖动改变ag-grid列宽度和移动列位置">ag-grid拖动宽度和位置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/yyeeiybn.html" title="ag-grid数据刷选器在列头上增加数据搜索功能">ag-grid数据刷选器</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/evfzmi2a.html" title="ag-grid编辑表格实现可编辑行和单元格">ag-grid编辑表格</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">ag-gird设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/fvnyiifq.html" title="ag-grid定义列columnDefs及列属性">ag-grid定义列</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/ffauvuzq.html" title="ag-grid width 定义列宽">ag-grid 定义列宽</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/j2ifzjzv.html" title="ag-grid设置行高列宽">ag-grid设置行高列宽</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/z2mbaiju.html" title="ag-grid设置选择行点击选中单行或多行">ag-grid设置选择行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/bfqnznzv.html" title="ag-grid checkbox设置复选框">ag-grid设置复选框</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/vnmbruvb.html" title="ag-grid pinnedTopRowData置顶行固定在顶部">ag-grid置顶合计行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/yruvfz3e.html" title="ag-grid pinnedBottomRowData 把行数据固定在底部">ag-grid底部合计行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/efuz3mir.html" title="ag-grid rowGroup行组">ag-grid行组</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/eefmvqju.html" title="ag-grid设置客户端排序sort">ag-grid客户端排序</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">ag-grid方法</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/qm3u7jve.html" title="ag-grid setRowData重新设置表格行数据">setRowData重设表格行数据</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/jjqur2qr.html" title="ag-grid增加行删除行修改行">ag-grid增加删除修改行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/qnzf3aff.html" title="ag-grid全选反选">ag-grid全选反选</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/zmmzeea7.html" title="ag-grid sizeColumnsToFit自适应大小">sizeColumnsToFit自适应大小</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/rqfaeyua.html" title="ag-grid setColumnDefs新增列重新设置列">setColumnDefs新增列</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/fiva7nmr.html" title="ag-grid setRowData插入新的行和新增行">setRowData插入新行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/ryuvqvjf.html" title="ag-grid setPinnedTopRowData设置表格置顶行汇总行">setPinnedTopRowData设置置顶行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/3ymf2yry.html" title="ag-grid setPinnedBottomRowData设置表格底部行汇总行统计行">setPinnedBottomRowData设置底部汇总行</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/zuqy2qve.html" title="ag-grid forEachNode遍历行对象">forEachNode遍历行对象</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/yjyumym6.html" title="ag-grid getPinnedTopRowCount获取置顶行数量">getPinnedTopRowCount置顶行数</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/6fqir2va.html" title="ag-grid getPinnedBottomRow获取底部合计行对象">getPinnedBottomRow底部合计</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/mub3ifaz.html" title="ag-grid getRowNode获取行对象">getRowNode获取行对象</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/3mzmjy6r.html" title="ag-grid refreshCells刷新更新数据">refreshCells刷新更新数据</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/zqbavbvv.html" title="ag-grid单元格焦点相关方法getFocusedCell setFocusedCell">ag-grid单元格焦点</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">ag-grid事件</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/zbvv3ujb.html" title="ag-grid onRowClicked行点击事件">onRowClicked行点击事件</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/ueui3ury.html" title="ag-grid onCellClicked单击单元格事件">onCellClicked单击单元格事件</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/iey3a2fu.html" title="ag-grid onCellDoubleClicked双击单元格事件">onCellDoubleClicked双击单元格事件</a>
            <a data-level="2" class="leve-2   doc-1   " href="/ag-grid/yvajvvij.html" title="ag-grid全部事件列表">ag-grid全部事件列表</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
